Listes

En C#, pour grouper plusieurs éléments dans un même conteneur, on peut utiliser une liste. Par exemple, voici une liste contenant 5 éléments:

Le code correspondant est:

List<string> names = new("bob","max","lisa","ania","roger");

Prérequis

Ce tutorial part du principe que celui-ci a été réalisé et compris notamment en ce qui concerne l'utilisation du MVVM toolkit

Le but de ce tutorial est de créer une "wishlist", un peu comme si on avait une lampe d'Aladdin :

Vue initiale

Créer un projet si nécessaire, puis ajouter un fichier XAML comme suit:

À part le composant ListView en fin de fichier, les éléments présentés ne sont pas nouveaux hormis le champ de saisie qui a un attribut x:Name

nécessaire à passer son contenu en paramètre de la commande qui ajoute un voeu:

ViewModel

Créer ensuite le ViewModel associé.

En suivant le XAML précédent, on comprend qu'il faut un attribut pour la liste des voeux :

ainsi qu'une méthode pour l'ajout:

Liste

Selon ce qui a été rappelé, on serait tenté de déclarer l'attribut suivant:

List<string> wishes = new(){"marcher sur la lune","..."};

Et de lui ajouter l'annotation MVVM:

[Observable Property]
List<string> wishes = new(){"marcher sur la lune","..."};

Malheureusement ce n'est pas aussi simple, mais presque.
En effet, s'agissant d'une liste, on s'intéresse aux modifications à l'intérieur de la liste et non pas forcément de la liste toute entière.
Ainsi il faut utiliser un nouveau type de liste qui déclenche les notifications MVVM et qui se nomme ObservableCollection:

private  ObservableCollection<string> wishes = new() { "décrocher la lune","voler dans les airs"};

Commande

Concernant la commande, rien de particulier, on fait comme précédemment en commençant par créer une méthode:

private void AddWish(string wish)
{
    Wishes.Add(wish);
}

puis en ajoutant l'annotation MVVM correspondante:

[RelayCommand]
private void AddWish(string wish)
{
    Wishes.Add(wish);
}

Tout ensemble

État des lieux

À ce stade l'application devrait être fonctionnelle et mérite quelques ajustements que l'on retrouve régulièrement dans les applications.

Activation conditionnelle du bouton

Tant que rien n'est écrit dans le champ texte, le bouton Ajouter devrait être désactivé. Avec le MVVM toolkit et un peu de XAML, on peut réaliser ceci de manière élégante.

ViewModel

[ObservableProperty]
[NotifyCanExecuteChangedFor(nameof(AddWishCommand))]
private string wishEntry = "";

[RelayCommand(CanExecute = nameof(AddWishCanExecute))]
private void AddWish(string wish)
{
    Wishes.Add(wish);
}

private bool AddWishCanExecute()
{
    return !string.IsNullOrEmpty(WishEntry);
}

XAML

La seule modification à effectuer est de rajouter le binding entre le champ texte et la propriété qui permet de savoir si du texte est rempli:

À partir de là, tant que le champ texte n'est pas rempli, le bouton devrait être désactivé !

Vider le champ texte

Il serait agréable que le champ texte se réinitialise après avoir ajouté une entrée.
Maintenant que le champ texte est lié (binding) au ViewModel, il suffit de changer sa valeur:

[RelayCommand(CanExecute = nameof(AddWishCanExecute))]
private void AddWish(string wish)
{
    Wishes.Add(wish);

    //Vidange du champ texte automatique
    wishEntry="";
}

Attribut VS Propriété

Le Toolkit MVVM transforme automatiquement un attribut private string attr en une propriété (ajout de getter/setter) parce qu'il ajoute les mécanismes de notification MVVM... De ce fait, pour profiter des ajouts, on doit obligatoirement passer par les accesseurs. Ainsi un w minuscule aura une grande différence de fonctionnement d'un W majuscule:

/*MAJUSCULE->Propriété->MVVM*/W/*/!\*/ishEntry="";

Lier simplicité et efficacité

MVVM avec le toolkit permet de faire beaucoup avec peu, pour autant qu'on soit concentré et qu'on comprenne comment ça fonctionne.

Les deux tutoriaux réalisés décrivent la base du fonctionnement avec MVVM et le toolkit à partir de laquelle on peut développer de plus vastes applications. Il s'agit alors de reproduire les bons réflexes acquis...

Enfin, en cas de difficulté, revenir à ces 2 exercices devraient aider à identifier / résoudre le problème.